<template>
	<view class="container">
		<view class="tab-box">
			<view @tap="tabChange(index)" class="tab-item" v-for="(item,index) in serviceList" :key="index">
				<view class="item-label" :class="{'item-label-a': curIndex == index}">{{item.name}}</view>
				<view class="item-line" v-show="curIndex == index"></view>
			</view>
		</view>
		<view class="title">服务类别及权益介绍</view>
		<swiper :style="{height: swiperHeight + 'px'}" :current="curIndex" duration="300" @change="swiperChange">
			<swiper-item>
				<view class="service-box">
					<view class="service-item">
						<view class="service-title">1、老师注册上限15人</view>
						<view class="service-content">教师注册人数上限为15人。</view>
					</view>
					<view class="service-item">
						<view class="service-title">2.智能匹配进群</view>
						<view class="service-content">匹配进入与高校同层次段考生群，进行考前考后咨询。</view>
					</view>
					<view class="service-item">
						<view class="service-title">3.高校朋友圈建设及推广</view>
						<view class="service-content">老师可在APP内发布图文和短视频（建设中）动态，并根据考生肖像定向推广。</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="service-box">
					<view class="service-item">
						<view class="service-title">1、老师注册上限15人</view>
						<view class="service-content">教师注册人数上限为15人。</view>
					</view>
					<view class="service-item">
						<view class="service-title">2.智能匹配进群</view>
						<view class="service-content">匹配进入与高校同层次段考生群，进行考前考后咨询。</view>
					</view>
					<view class="service-item">
						<view class="service-title">3.高校朋友圈建设及推广</view>
						<view class="service-content">老师可在APP内发布图文和短视频（建设中）动态，并根据考生肖像定向推广。</view>
					</view>
					<view class="service-item">
						<view class="service-title">4.私聊考生</view>
						<view class="service-content">老师可与群内考生进行私聊。</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="service-box">
					<view class="service-item">
						<view class="service-title">1、老师注册上限15人</view>
						<view class="service-content">教师注册人数上限为15人。</view>
					</view>
					<view class="service-item">
						<view class="service-title">2.智能匹配进群</view>
						<view class="service-content">匹配进入与高校同层次段考生群，进行考前考后咨询。</view>
					</view>
					<view class="service-item">
						<view class="service-title">3.高校朋友圈建设及推广</view>
						<view class="service-content">老师可在APP内发布图文和短视频（建设中）动态，并根据考生肖像定向推广。</view>
					</view>
					<view class="service-item">
						<view class="service-title">4.私聊考生</view>
						<view class="service-content">老师可与群内考生进行私聊。</view>
					</view>
					<view class="service-item">
						<view class="service-title">5.志愿标签推荐</view>
						<view class="service-content">系统根据考生成绩及兴趣标签，自动推荐合作高提高曝光率。</view>
					</view>
					<view class="service-item">
						<view class="service-title">6.保录计划推荐</view>
						<view class="service-content">招生辅导员根据考生成绩及兴趣标签，进行合作高校 推荐。</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="service-box">
					<view class="service-item">
						<view class="service-title">1、老师注册上限15人</view>
						<view class="service-content">教师注册人数上限为15人。</view>
					</view>
					<view class="service-item">
						<view class="service-title">2.智能匹配进群</view>
						<view class="service-content">匹配进入与高校同层次段考生群，进行考前考后咨询。</view>
					</view>
					<view class="service-item">
						<view class="service-title">3.高校朋友圈建设及推广</view>
						<view class="service-content">老师可在APP内发布图文和短视频（建设中）动态，并根据考生肖像定向推广。</view>
					</view>
					<view class="service-item">
						<view class="service-title">4.私聊考生</view>
						<view class="service-content">老师可与群内考生进行私聊。</view>
					</view>
					<view class="service-item">
						<view class="service-title">5.志愿标签推荐</view>
						<view class="service-content">系统根据考生成绩及兴趣标签，自动推荐合作高提高曝光率。</view>
					</view>
					<view class="service-item">
						<view class="service-title">6.保录计划推荐</view>
						<view class="service-content">招生辅导员根据考生成绩及兴趣标签，进行合作高校 推荐。</view>
					</view>
					<view class="service-item">
						<view class="service-title">7.微信推送</view>
						<view class="service-content">根据考生登录所用微信号进行定向推送。</view>
					</view>
					<view class="service-item">
						<view class="service-title">8.短信推送</view>
						<view class="service-content">根据考生登录手机号进行短信广告推送。</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="submit-box">
			<view class="submit-btn">升级服务</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curIndex: 0,
				swiperHeight: 0,
				serviceList: [
					{id: 1, name: 'A服务'},
					{id: 2, name: 'B服务'},
					{id: 3, name: 'C服务'},
					{id: 4, name: 'D服务'}
				],
			}
		},
		
		onReady() {
			const that = this
			let el = uni.createSelectorQuery().selectAll('.service-box').boundingClientRect()
			el.exec(res => {
				that.swiperHeight = res[0][that.curIndex].height + 100
			})
		},
		
		methods: {
			
			tabChange(index) {
				this.curIndex = index
			},
			
			swiperChange(e) {
				const that = this
				that.curIndex = e.detail.current
				let el = uni.createSelectorQuery().selectAll('.service-box').boundingClientRect()
				el.exec(res => {
					that.swiperHeight = res[0][that.curIndex].height + 100
				})
			}
			
		}
	}
</script>

<style>
	.container {
		width: 750rpx;
	}
	
	.tab-box {
		width: 750rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #ffffff;
		padding-top: 20rpx;
		z-index: 999999;
	}
	
	.tab-item {
		width: 188rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.item-label {
		color: #666666;
		font-size: 34rpx;
	}
	
	.item-label-a {
		color: #45d6b7 !important;
	}
	
	.item-line {
		width: 32rpx;
		height: 4rpx;
		background-color: #45d6b7;
		margin-top: 20rpx;
	}
	
	.title {
		width: 750rpx;
		text-align: center;
		color: #333333;
		margin-top: 100rpx;
		font-size: 30rpx;
	}
	
	.service-box {
		margin-top: 30rpx;
	}
	
	.service-title {
		width: 750rpx;
		height: 88rpx;
		background-color: #f7f7f7;
		padding-left: 54rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #333333;
		font-size: 30rpx;
	}
	
	.service-content {
		width: 690rpx;
		height: 120rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 30rpx;
		color: #666666;
		padding-left: 54rpx;
	}
	
	.submit-box {
		z-index: 100;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 130rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
	}
	
	.submit-btn {
		width: 556rpx;
		height: 92rpx;
		background-color: #45d6b7;
		color: #ffffff;
		font-size: 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 46rpx;
	}
</style>
